import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';
import '../providers/mood_provider.dart';
import '../providers/app_state_provider.dart';
import '../providers/important_days_provider.dart';

class MoodCard extends StatelessWidget {
  final Map<String, dynamic>? cardData;
  
  const MoodCard({super.key, this.cardData});

  @override
  Widget build(BuildContext context) {
    return Consumer3<MoodProvider, AppStateProvider, ImportantDaysProvider>(
      builder: (context, moodProvider, appProvider, daysProvider, child) {
        final upcomingDays = daysProvider.upcomingDays;
        
        return Center(
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
            constraints: const BoxConstraints(maxWidth: 380),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(24),
              border: Border.all(color: const Color(0xFFE5E7EB), width: 1),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.12),
                  blurRadius: 24,
                  offset: const Offset(0, 8),
                ),
                BoxShadow(
                  color: Colors.black.withOpacity(0.04),
                  blurRadius: 8,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
              // 顶部视觉区块 - 仿照HTML的背景图片区域
              Container(
                height: 160,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: cardData?['bgColors'] ?? [const Color(0xFFA2D2FF), const Color(0xFF6366F1)],
                  ),
                  borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 问候语和日期
                      Text(
                        cardData?['greeting'] ?? '亲爱的，早上好！',
                        style: const TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                      Text(
                        DateFormat('MM月dd日', 'zh_CN').format(DateTime.now()),
                        style: const TextStyle(
                          fontSize: 14,
                          color: Colors.white70,
                        ),
                      ),
                      const Spacer(),
                      // 天气信息区
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              Text(
                                cardData?['weather'] ?? '☀️',
                                style: const TextStyle(fontSize: 48),
                              ),
                              const SizedBox(width: 8),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    cardData?['temp'] ?? '28°',
                                    style: const TextStyle(
                                      fontSize: 32,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white,
                                    ),
                                  ),
                                  Text(
                                    cardData?['weatherDesc'] ?? '晴转多云',
                                    style: const TextStyle(
                                      fontSize: 14,
                                      color: Colors.white70,
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              
              // 主要内容区
              Padding(
                padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // 信息网格 - 仿照HTML的4格布局
                    GridView.count(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      crossAxisCount: 2,
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 8,
                      childAspectRatio: 2.4,
                      children: [
                        _buildInfoCard('💧', '湿度', '75%'),
                        _buildInfoCard('🍃', '优 45', '空气质量'),
                        _buildInfoCard('💨', '风力', '微风'),
                        _buildInfoCard('🌡️', '温度', '22° / 30°'),
                      ],
                    ),
                    
                    const SizedBox(height: 8),
                    
                    // 恋爱区域 - 仿照HTML的粉色虚线框
                    Container(
                      width: double.infinity,
                      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                      decoration: BoxDecoration(
                        color: const Color(0xFFFDF2F8),
                        borderRadius: BorderRadius.circular(12),
                        border: Border.all(
                          color: const Color(0xFFF472B6),
                          width: 2,
                          style: BorderStyle.solid,
                        ),
                      ),
                      child: Column(
                        children: [
                          RichText(
                            text: TextSpan(
                              style: const TextStyle(color: Color(0xFFDC2626)),
                              children: [
                                const TextSpan(
                                  text: '我们相恋 ',
                                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                                ),
                                TextSpan(
                                  text: '${appProvider.daysInRelationship}',
                                  style: const TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold,
                                    color: Color(0xFFEC4899),
                                  ),
                                ),
                                const TextSpan(
                                  text: ' 天',
                                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                                ),
                              ],
                            ),
                          ),
                          if (upcomingDays.isNotEmpty) ...[
                            const SizedBox(height: 2),
                            Text(
                              '🎉 ${upcomingDays.first.title}还有 ${upcomingDays.first.date.difference(DateTime.now()).inDays} 天',
                              style: const TextStyle(
                                fontSize: 11,
                                color: Color(0xFFEC4899),
                              ),
                            ),
                          ],
                        ],
                      ),
                    ),
                    
                    const SizedBox(height: 6),
                    
                    // 情话区域
                    FutureBuilder<String>(
                      future: moodProvider.getDailyLoveQuote(),
                      builder: (context, snapshot) {
                        if (snapshot.connectionState == ConnectionState.waiting) {
                          return const Text(
                            '"正在加载今日情话..."',
                            style: TextStyle(
                              fontSize: 12,
                              fontStyle: FontStyle.italic,
                              color: Color(0xFF6B7280),
                            ),
                            textAlign: TextAlign.center,
                          );
                        }
                        
                        if (snapshot.hasError) {
                          return const Text(
                            '"愿我们的爱情永远甜蜜如初"',
                            style: TextStyle(
                              fontSize: 12,
                              fontStyle: FontStyle.italic,
                              color: Color(0xFF6B7280),
                            ),
                            textAlign: TextAlign.center,
                          );
                        }
                        
                        return Text(
                          '"${snapshot.data ?? "愿我们的爱情永远甜蜜如初"}"',
                          style: const TextStyle(
                            fontSize: 12,
                            fontStyle: FontStyle.italic,
                            color: Color(0xFF6B7280),
                          ),
                          textAlign: TextAlign.center,
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        );
                      },
                    ),
                  ],
                ),
              ),
              
              // 底部心情区 - 仿照HTML的心情footer
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                decoration: const BoxDecoration(
                  border: Border(top: BorderSide(color: Color(0xFFE5E7EB))),
                ),
                child: Row(
                  children: [
                    // 左侧 - 我的心情
                    Expanded(
                      child: Row(
                        children: [
                          const Text('👩', style: TextStyle(fontSize: 24)),
                          const SizedBox(width: 8),
                          GestureDetector(
                            onTap: () => _showMoodPicker(context, (mood) => moodProvider.setMyMood(mood)),
                            child: Container(
                              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                              decoration: BoxDecoration(
                                color: const Color(0xFFFEF3C7),
                                borderRadius: BorderRadius.circular(20),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.1),
                                    blurRadius: 4,
                                    offset: const Offset(0, 2),
                                  ),
                                ],
                              ),
                              child: Text(
                                moodProvider.myMood?.emoji ?? '☀️',
                                style: const TextStyle(fontSize: 20),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    
                    // 中间 - 心动按钮
                    GestureDetector(
                      onTap: () {
                        // TODO: 心动按钮动画和提示
                      },
                      child: Container(
                        padding: const EdgeInsets.all(4),
                        child: const Text('❤️', style: TextStyle(fontSize: 28)),
                      ),
                    ),
                    
                    // 右侧 - TA的心情
                    Expanded(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          GestureDetector(
                            onTap: () => _showMoodPicker(context, (mood) => moodProvider.setPartnerMood(mood)),
                            child: Container(
                              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                              decoration: BoxDecoration(
                                color: const Color(0xFFDDEAFE),
                                borderRadius: BorderRadius.circular(20),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.1),
                                    blurRadius: 4,
                                    offset: const Offset(0, 2),
                                  ),
                                ],
                              ),
                              child: Text(
                                moodProvider.partnerMood?.emoji ?? '☁️',
                                style: const TextStyle(fontSize: 20),
                              ),
                            ),
                          ),
                          const SizedBox(width: 8),
                          const Text('👨', style: TextStyle(fontSize: 24)),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ));
      },
    );
  }

  Widget _buildInfoCard(String icon, String title, String value) {
    return Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: const Color(0xFFF3F4F6),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        children: [
          Text(icon, style: const TextStyle(fontSize: 18)),
          const SizedBox(width: 8),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w600,
                    color: Color(0xFF374151),
                  ),
                ),
                Text(
                  value,
                  style: const TextStyle(
                    fontSize: 11,
                    color: Color(0xFF6B7280),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void _showMoodPicker(BuildContext context, Function(MoodType) onMoodSelected) {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
        padding: const EdgeInsets.all(20),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              '选择今天的心情',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 20),
            Wrap(
              spacing: 16,
              runSpacing: 16,
              children: MoodType.values.map((mood) {
                return GestureDetector(
                  onTap: () {
                    onMoodSelected(mood);
                    Navigator.pop(context);
                  },
                  child: Column(
                    children: [
                      Container(
                        width: 60,
                        height: 60,
                        decoration: BoxDecoration(
                          color: Colors.grey.shade100,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Center(
                          child: Text(
                            mood.emoji,
                            style: const TextStyle(fontSize: 24),
                          ),
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        mood.description,
                        style: const TextStyle(fontSize: 12),
                      ),
                    ],
                  ),
                );
              }).toList(),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}